<template>
  <div class="main">
    <navi title="意见反馈" back='1'></navi>
    <div class="content">
      <textarea name="" v-model="text" id="" cols="30" rows="10"></textarea>
      
      <div class="img_list">
        <img class="img" :src="item" v-aspectfill v-for="(item, index) in img" :key="index" />
        <div class="add_img img" @click.stop="selectImg()">
          <i class="iconfont icon-add-line"></i>
          上传图片
        </div>
      </div>
    </div>
    <button :class="complete?'complete':''" @click="complete&&submit()">提交</button>
  </div>
</template>
<script>
import navi from '@/components/navigatebar.vue'
export default {
  components:{
    navi
  },
  created(){

  },
  data(){
    return{
      img:[],
      img_list:[],
      text:'',
      complete:false
    }
  },
  watch:{
    text(newval){
      this.complete=newval.length>5
    }
  },
  methods:{
    
    selectImg(){
      let that=this
      var URL = window.URL || window.webkitURL;
      wjh.chooseImg(e=>{
        let files=e.target.files
        
        let fileList=Array.from(files)
        console.log('files',fileList)
        fileList.forEach(item => {
            this.$ajax.upload(item,res=>{
                this.img_list.push(res.url)
            })
            this.img.push(URL.createObjectURL(item))
        });
        
      })
    },
    submit(){
      
      this.$ajax.post('faceback',{
        text:this.text,
        img:this.img_list.join(',')
      },res=>{
        alert('反馈成功')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.main{
  min-height: 100vh;
  background: #f8f8f8;
}
.content{
  width: 702rem;
  background: #ffffff;
  border: 2rem solid;
  border-image: linear-gradient(173deg, #ffffff 100%, rgba(255,255,255,0.00) 100%) 1 1;
  border-radius: 20rem;
  box-shadow: 4rem 4rem 32rem 0rem rgba(51,51,51,0.06);
  padding: 30rem;
  margin: 22rem;
  margin-bottom: 300rem;
  textarea{
    padding: 16rem;
    width: 640rem;
    height: 246rem;
    background: #f8f8f8;
    border-radius: 12rem;
    margin-bottom: 24rem;
    font-size: 26rem;
    font-weight: 600;
    color: #999999;
  }
  .img_list{
    display: flex;
    flex-wrap: wrap;
    border-radius: 20rem;
    .add_img{
    border-radius: 20rem;
    width: 160rem;
    height: 160rem;
    background: #f8f8f8;
    border: 2rem dashed #bebebe;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
      i{
        margin-bottom: 10rem;
        font-size: 50rem;
      }
    }
    .img{
      width: 160rem;
      height: 160rem;
      border-radius: 20rem;
      margin: 20rem 25rem;
    }
  }
  
}
button{
  width: 640rem;
  height: 80rem;
  background: #bebebe;
  border-radius: 68rem;
  box-shadow: 8rem 8rem 32rem 0rem rgba(51,51,51,0.06);
  font-size: 32rem;
  font-weight: 700;
  color: #ffffff;
}
.complete{
  background: #08d5f5;
}
</style>